<template>
  <div class="container">
    <!--顶部盒子-->
    <div class="top">
      <ul class="tab_box">
        <li
          :class="{ tab1: true, active: currentPage == 0 }"
          @click="currentPage = 0"
        >
          党务党建
        </li>
        <li
          :class="{ tab2: true, active: currentPage == 1 }"
          @click="currentPage = 1"
        >
          村庄产业
        </li>
        <li
          :class="{ tab2: true, active: currentPage == 2 }"
          @click="currentPage = 2"
        >
          智慧农村
        </li>
      </ul>
      <div class="top_center">智慧农村-金村村专题看板</div>
      <ul class="weather">
        <li>{{ weatherInformation.nowTime }}</li>
        <li><span>&nbsp;</span>{{ weatherInformation.text }}</li>
        <li>{{ weatherInformation.temp }}℃</li>
        <li>{{ weatherInformation.windScale }}级</li>
        <li>{{ weatherInformation.windDir }}&nbsp;</li>
      </ul>
    </div>
    <!-- 底部内容区域 -->
    <div v-if="currentPage == 0">
      <SmartParty></SmartParty>
    </div>
    <div v-if="currentPage == 1">
      <SmartCountryside></SmartCountryside>
    </div>
    <div v-if="currentPage == 2">
      <SmartagriCulture></SmartagriCulture>
    </div>
  </div>
</template>

<script>
import SmartCountryside from "@/views/SmartCountryside/SmartCountryside";
import SmartParty from "@/views/SmartParty/SmartParty";
import SmartagriCulture from "@/views/SmartagriCulture/SmartagriCulture";
import { getWeatherInformation } from "@/api/smartpartybuilding";
export default {
  name: "MainPage",
  components: { SmartParty, SmartCountryside,SmartagriCulture },
  mounted() {
    this.getWeatherInformation();
  },
  data() {
    return {
      currentPage: 0,
      weatherInformation: {
        // 当前时间
        nowTime: "",
        // 天气描述
        text: "",
        // 温度
        temp: "",
        // 风力等级
        windScale: "",
        // 风向
        windDir: "",
      },
    };
  },
  methods: {
    getWeatherInformation() {
      getWeatherInformation()
        .then((res) => {
          this.weatherInformation = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
@import "../css/common.css";
</style>